<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊添_登录界面</title>

    <!--    BootStrap remote file css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

    <!--    BootStrap local file-->
    <link rel="stylesheet" href="../../../../node_modules/bootstrap/dist/css/bootstrap.css">

    <!--    BootStrap Icon on the Internet-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <!--    local css-->
    <link rel="stylesheet" href="./css/style.css">

</head>
<body class="bg-light">
<div class="container p-5 d-flex justify-content-center">


    <div class="card room-card">
        <!--     NOTE: 这里的渐变要去搞搞用法-->
        <div class="card-header bg-success bg-gradient  text-light">
            <!-- NOTE:     fs => font-size  1是最大 , 7是最小 , 这里是4-->
            <!-- NOTE:     记得给Notion提醒 , 在Mac上记得添加 NOTE 的标志-->
            <div class="text-center fs-4">
                <i class="bi bi-chat-dots"></i>
                <span>聊添</span>
            </div>
        </div>


        <form
                id="login-form"
                action="chat.html"
                method="GET"
        >
            <div class="card-body">

                <!-- name region -->
                <div class="mb-3">
                    <label class="form-label">姓名</label>
                    <input
                            id="form-name"
                            name="name"
                            class="form-control"
                            placeholder="请输入您的姓名"
                    >
                </div>

                <!-- room region -->
                <div class="mb-0">
                    <label class="form-label">房间</label>
                    <select
                            name="room"
                            class="form-select"
                            aria-label="Default select example"
                    >
                        <option selected>请选择房间</option>
                        <option value="javascript">JavaScript</option>
                        <option value="php">PHP</option>
                        <option value="python">Python</option>
                    </select>
                </div>


            </div>
            <!-- button -->
            <div class="card-footer">
                <button class="btn btn-success w-100" id="form-submit">加入房间</button>
            </div>
        </form>
    </div>
</div>


<!-- BootStrap Local -->
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- BootStrap remote file javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ"
        crossorigin="anonymous"></script>

<script src="login.js"></script>
</body>
</html>